<template>
  <div class="detailsPage">
    <DetailsNav @itemClick="itemClick" :curIndex="curIndex" />
    <Scroll class="scroll" ref="scroll" @scroll="scroll">
      <DetailsSwiper :swiperData="swiperData" class="detailsSwiper" />
      <GoodsDetailsInfo :goodsDetailsInfo="goodsDetailsInfo" />
      <DetailsShop :getShopInfo="getShopInfo" />
      <DetailsInfo :detailInfo="detailInfo" />
      <DetailsSize ref="size" :goodsParams="goodsParams" />
      <DetailsComment ref="comm" :comment="comment" />
      <GoodsList ref="recom" :itemList="reData" class="recom" />
    </Scroll>
    <BackTop @click.native="backTop" v-show="showBackTop"></BackTop>
    <DetailsBottomBar class="tb" @addToCart="addToCart"/>
  </div>
</template>
<script>
import DetailsNav from "./childComponent/detailsNav";
import DetailsSwiper from "./childComponent/detailsSwiper";
import GoodsDetailsInfo from "./childComponent/goodsDetailsInfo";
import DetailsShop from "./childComponent/detailsShop";
import DetailsInfo from "./childComponent/detailsInfo";
import DetailsSize from "./childComponent/detailsSize";
import DetailsComment from "./childComponent/detailsComment";
import DetailsBottomBar from "./childComponent/detailsBottomBar";

import Scroll from "components/commom/scroll/scroll";
import GoodsList from "components/content/goods/GoodsList";
import BackTop from "components/content/backTop";

import {
  getDetailsData,
  recommend,
  getGoodsDetailsInfo,
  getShopInfo,
  goodsParams,
  comment,
} from "network/details";
import {mapActions} from 'vuex'

export default {
  name: "Details",
  components: {
    DetailsNav,
    DetailsSwiper,
    GoodsDetailsInfo,
    DetailsShop,
    Scroll,
    DetailsInfo,
    DetailsSize,
    DetailsComment,
    GoodsList,
    DetailsBottomBar,
    BackTop,
  },
  data() {
    return {
      swiperData: [],
      iid: 0,
      goodsDetailsInfo: {},
      getShopInfo: {},
      detailInfo: {},
      goodsParams: {},
      comment: {},
      reData: [],
      positionSet: [0, 0, 0, 0],
      position: 0,
      curIndex: 0,
      showBackTop:false,
    };
  },
  created() {
    this.iid = this.$route.params.iid;
    this.getDetailsData(this.iid);
    this.recommend();
  },
  methods: {
    ...mapActions(['addCart']),
    //获取数据
    getDetailsData(id) {
      getDetailsData(id).then(
        (res) => {
          var data = res.data.result;
          //轮播图
          this.swiperData = data.itemInfo.topImages;
          //商品信息
          this.goodsDetailsInfo = new getGoodsDetailsInfo(
            data.itemInfo,
            data.columns,
            data.shopInfo.services
          );
          //店铺信息
          this.getShopInfo = new getShopInfo(data.shopInfo);
          //详细信息
          this.detailInfo = data.detailInfo;
          //尺码表
          this.goodsParams = new goodsParams(
            data.itemParams.info,
            data.itemParams.rule
          );
          //评论
          this.comment = new comment(data.rate);
        },
        (err) => {
          return 0;
        }
      );
    },
    recommend() {
      //推荐
      recommend().then((res) => {
        this.reData = res.data.data.list;
      });
    },
    //监听操作
    itemClick(index) {
      console.log(index);
      if (!this.$refs.comm.$el.offsetTop) {
        console.log(123);
      }
      // console.log(this.$refs.scroll.getscrollY());
      this.positionSet = [0];
      this.positionSet.push(this.$refs.size.$el.offsetTop);
      this.positionSet.push(this.$refs.comm.$el.offsetTop);
      this.positionSet.push(this.$refs.recom.$el.offsetTop);
      this.$refs.scroll.scrollTo(0, -this.positionSet[index], 200);
    },
    scroll(position) {
      this.position = -position.y;
    },
    backTop() {
      this.$refs.scroll.scrollTo(0, 0, 1000);
    },
    addToCart(){
      const products = {}
      products.title = this.goodsDetailsInfo.title
      products.price = this.goodsDetailsInfo.realPrice
      products.img = this.swiperData[0]
      products.desc = this.goodsDetailsInfo.desc
      products.id = this.iid 
      // this.$store.dispatch('addCart',products).then(res=>{
      //   console.log(res);
      // })
      this.addCart(products).then(res=>{
        
        console.log(res);
        console.log(this.$toast);
        this.$toast.show(res,1500)
      })
    }
  },
  updated() {
    //将各个组件y轴上的位置记录到数组里（不准确）
    this.positionSet = [0];
    this.positionSet.push(this.$refs.size.$el.offsetTop);
    this.positionSet.push(this.$refs.comm.$el.offsetTop);
    this.positionSet.push(this.$refs.recom.$el.offsetTop);
  },
  watch: {
    $route(to, from) {
      //监听当前路由参数变化，重新请求数据（注：大多数iid都是空数据）
      this.iid = this.$route.params.iid;
      this.getDetailsData(this.iid);
      this.recommend();
      this.$refs.scroll.scrollTo(0, 0, 200);
    },
    position: {
      //监听当前滚动位置
      handler() {
        if (this.position >= 0 && this.position < this.positionSet[1]) {
          this.curIndex = 0;
        } else if (
          this.position >= this.positionSet[1] &&
          this.position < this.positionSet[2]
        ) {
          this.curIndex = 1;
        } else if (
          this.position >= this.positionSet[2] &&
          this.position < this.positionSet[3]
        ) {
          this.curIndex = 2;
        } else if (this.position >= this.positionSet[3]) {
          this.curIndex = 3;
        }
        if(this.position > 1000){
          this.showBackTop = true
        }else{
          this.showBackTop = false
        }
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
.detailsPage {
  position: relative;
  z-index: 55;
}
.detailsSwiper {
}
.scroll {
  overflow: hidden;
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 49px;
  background-color: #fff;
}
.recom {
  margin-top: 10px;
}
.tb {
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>